v0とCursorを使ってAI駆動のUI開発を試してみた
2024.10.24こんにちは、@TakaakiKakei です。
今回は、v0で生成したコードをCursorからlocalhostで立ち上げ、編集するまでの流れを試してみます。
v0とは
v0は、Vercelが提供するAI駆動型のUI生成ツールで、自然言語のプロンプトからReactコンポーネントを自動生成します。これにより、開発者はテキストや画像を使ってUIを素早く作成できるようになります。今回はFreeプランで検証します。
Cursorとは
Cursorは、AIを活用したコードエディタで、自然言語のプロンプトからコードを生成します。これにより、開発者は自然言語でコードを記述でき、効率的な開発が可能です。今回はBusinessプランで検証します。
実際にやってみた
1. v0でコード生成
まず、v0.dev にアクセスします。
「Slackライクな画面を生成して」というプロンプトを入力し、コード生成を試します。数十秒でコードが生成されました。
生成されたUIは、Previewボタンで確認できます。PoCとしては十分なUIが生成されました。
次に、Add to Codebaseボタンを押し、表示されたポップアップ内のコマンドラインをコピーします。このコマンドを後ほど使用して、生成したコードをインポートします。
2. Cursorでプロジェクトを準備
Cursorを開き、Open a folderをクリックして新しいフォルダを作成します。
次に、Cursorのターミナルで、先ほどコピーしたコマンドを貼り付けて実行します。
% npx shadcn@latest add ..snip..
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
✔ The path /Users/..snip.. does not contain a package.json file. Would you like to start a new Next.js project? … yes
✔ What is your project named? … .
✔ Creating a new Next.js project.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Neutral
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Installing dependencies.
✔ Created 6 files:
- components/slack-clone.tsx
- components/ui/input.tsx
- components/ui/button.tsx
- components/ui/scroll-area.tsx
- components/ui/avatar.tsx
- components/ui/separator.tsx
これで、v0で生成したコードがインポートされました。
3. localhostで立ち上げ
Cursorのターミナルで、npm run devを実行します。
http://localhost:3000にアクセスすると、v0で生成したUIが表示されます。
4. Cursorでコードを編集
Cursorを使うことで、v0で生成されたコードに自然言語を使って簡単に追加実装ができます。例えば、生成されたコードでは、メッセージ入力欄にテキストを入力しても反映されない状態でした。
そこで、CursorのComposer機能を使って実装を試してみます。Composerは、AIを活用して複数ファイルを効率的に編集できる機能です。関連するファイルを同時に開いて編集でき、差分表示で変更箇所を簡単に確認できます。
Ctrl/Cmd + iで小窓、Ctrl/Cmd + shift + iで大窓のComposerが起動します。今回は大窓でComposerを起動し、以下のように入力します。
メッセージを入力したら、その内容が反映されるようにしてほしいです
Composerが提示した変更案をAcceptします。
以下のようにコードが編集されました（GitHub Desktopの画面）。
http://localhost:3000にアクセスし、メッセージ入力欄にテキストを入力すると、やりとりが反映されるようになりました。
考察など
v0で利用される技術スタック
v0で生成されるコードは、Next.jsとshadcn/uiをベースにしています。Next.jsはVercelが開発したReactベースのフレームワークで、shadcn/uiはRadix UIとTailwind CSSを基盤としたUIコンポーネントライブラリです。これらはすべてVercelのエコシステムに属しており、互換性が高いのが特徴といえるでしょう。
v0で生成されたコードの活用方法
v0で生成されたコードは、開発者にとって大きな利便性を提供します。従来はshadcn/uiのドキュメントを参照しながら手動でコンポーネントを組み合わせる必要がありましたが、v0を使えば自然言語で指示するだけで複数のコンポーネントを組み合わせたUIを自動生成できます。
また、ビジネス面でも、営業やプロジェクトマネージャーが顧客との商談でUIのイメージを即座に共有できるため、コミュニケーションがより円滑になることが期待されます。
おわりに
最後までお読みいただきありがとうございました。
近年、開発効率を向上させるAIツールが数多く登場しています。その中でもv0は、Vercelのエコシステムに属しており、同社のサービスとの高い互換性を持つ点で他のツールと一線を画しています。また、Cursorも他のAIを活用したコードエディタと比較して、Composer機能などを活用することで開発効率を大幅に向上させることができます。今後も積極的に活用していきたいと思います。
ではでは！
